<div class="question-list-page">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>📝 问句管理</h2>
        <div>
            <button class="btn btn-success" onclick="questionList.showImportDialog()">
                📥 批量导入
            </button>
            <button class="btn btn-primary" onclick="questionList.showAddDialog()">
                ➕ 添加问句
            </button>
        </div>
    </div>

    <!-- 搜索区域 -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" id="searchKeyword" placeholder="搜索问句内容">
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchCategory">
                        <option value="">全部类别</option>
                        <option value="信息查询">信息查询</option>
                        <option value="比较选择">比较选择</option>
                        <option value="购买建议">购买建议</option>
                        <option value="问题解决">问题解决</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchProductId">
                        <option value="">筛选产品</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchProductCategoryId">
                        <option value="">筛选产品类别</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <select class="form-select" id="searchStatus">
                        <option value="">状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary me-1" onclick="questionList.search()">🔍 搜索</button>
                    <button class="btn btn-secondary" onclick="questionList.reset()">🔄 重置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card">
        <div class="card-body">
            <table id="questionTable" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="60">ID</th>
                        <th>问句内容</th>
                        <th width="100">类别</th>
                        <th width="150">产品类别</th>
                        <th width="150">标签</th>
                        <th width="80">优先级</th>
                        <th width="80">状态</th>
                        <th width="100">采集次数</th>
                        <th width="180">创建时间</th>
                        <th width="200">操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加/编辑问句对话框 -->
<div class="modal fade" id="questionFormModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加问句</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="questionForm">
                    <input type="hidden" id="questionId">
                    
                    <div class="mb-3">
                        <label class="form-label">问句内容 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="questionContent" rows="3" required></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">问句类别</label>
                            <select class="form-select" id="questionCategory">
                                <option value="">请选择</option>
                                <option value="信息查询">信息查询</option>
                                <option value="比较选择">比较选择</option>
                                <option value="购买建议">购买建议</option>
                                <option value="问题解决">问题解决</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">产品类别</label>
                            <input type="text" class="form-control" id="productCategory" placeholder="如：手机、笔记本电脑">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">优先级</label>
                            <select class="form-select" id="questionPriority">
                                <option value="medium">中</option>
                                <option value="high">高</option>
                                <option value="low">低</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="questionStatus">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">标签</label>
                        <input type="text" class="form-control" id="questionTags" placeholder="多个标签用逗号分隔，如：手机,华为,性价比">
                        <small class="text-muted">多个标签用逗号分隔</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" id="questionRemark" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="questionList.save()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 产品关联配置对话框 -->
<div class="modal fade" id="productRelationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">配置关联产品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>当前问句：<span id="currentQuestion" class="text-primary"></span></h6>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">选择产品</label>
                    <select class="form-select" id="selectProduct">
                        <option value="">请选择产品</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">关联类型</label>
                    <select class="form-select" id="relationType">
                        <option value="primary">主要产品</option>
                        <option value="related">相关产品</option>
                        <option value="compare">对比产品</option>
                    </select>
                </div>
                
                <button class="btn btn-success btn-sm mb-3" onclick="questionList.addProductRelation()">
                    ➕ 添加产品
                </button>
                
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>产品名称</th>
                            <th>品牌</th>
                            <th>关联类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="productRelationList"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 产品类别关联配置对话框 -->
<div class="modal fade" id="categoryRelationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">配置关联产品类别</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>当前问句：<span id="currentQuestion2" class="text-primary"></span></h6>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">选择产品类别</label>
                    <select class="form-select" id="selectCategory">
                        <option value="">请选择产品类别</option>
                    </select>
                </div>
                
                <button class="btn btn-success btn-sm mb-3" onclick="questionList.addCategoryRelation()">
                    ➕ 添加类别
                </button>
                
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>类别名称</th>
                            <th>层级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="categoryRelationList"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 加载问句列表JS -->
<script src="/assets/js/pages/question-list.js?v=20251012-7"></script>

